<!--
 * @description  : 案件推送列表
 * @descriptionDetail: 案件推送列表
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-09-27 09:58:58
-->
<template>
	<view>
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<span @tap="handlerShowSearch" style="margin-right:10px;">
					筛选
				</span>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<!-- 条件筛选 -->
		<u-popup mode="top" v-model="showSearch">
			<u-card :show-head="false" :show-foot="false" margin="0">
				<view slot="body">
					<view class="left-text">
						推送状态
					</view>
					<view style="margin-bottom:15px;">
						<z-dict-select dictType="I_TC_PUSH_STATUS" v-model="formData.pushStatusName" @confirm="handleDictConfirmStutas"></z-dict-select>
					</view>
					<view class="left-text">
						案件类型
					</view>
					<view style="margin-bottom:15px;">
						<z-dict-select dictType="NG_ZXXT_AJLX" v-model="formData.caseTypeName" @confirm="handleDictConfirm"></z-dict-select>
					</view>
					<view class="left-text">
						任务时间
					</view>
					<view style="margin-bottom:15px;">
						<u-form-item>
							<span class="date-width"><z-date placeholder="开始时间" v-model="formData.startTime" /></span>
							<span class="between">至</span>
							<span class="date-width"><z-date placeholder="结束时间" v-model="formData.endTime" /></span>
						</u-form-item>
					</view>
					<view class="left-text">
						案件编号
					</view>
					<view style="margin-bottom:15px;">
						<u-input placeholder="请输入精准的案件编号" :border="true" v-model="formData.caseNo" />
					</view>
					<view class="left-text">
						当事人
					</view>
					<view>
						<u-input placeholder="请输入当事人名称" :border="true" v-model="formData.partyName" />
					</view>
				</view>
			</u-card>
			<u-card :show-head="false" :show-foot="false" margin="0">
				<template #body>
					<u-row gutter="16" justify="space-around">
						<u-col span="5" text-align="center">
							<u-button type="primary" size="medium" shape="circle" @tap="handleSearch">
								搜索
							</u-button>
						</u-col>
						<u-col span="5" text-align="center">
							<u-button size="medium" shape="circle" @tap="showSearch=false">
								关闭
							</u-button>
						</u-col>
					</u-row>
				</template>
			</u-card>
		</u-popup>
		<me-table :i="0" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
			<template #default="d">
				<u-card :head-style="headStyle" :body-style="bodyStyle" margin="20rpx" box-shadow="#e5e5e5 0px 0px 50px" @body-click="clickBody(d.data.trueCaseUuid,d.data.caseType,d.data.pushStatus)" @head-click="clickBody(d.data.trueCaseUuid,d.data.caseType,d.data.pushStatus)">
					<template #head>
						<view style="padding: 5px 0px;">
							<u-icon :label="d.data.caseName" size="42" style="font-weight: 600" label-size="30" label-color="#333" name="order" color="#2979ff"></u-icon>
							<!-- 案件类型 -->

							<!-- 状态 -->
							<u-tag style="float:right;border:none;" type="Info" text="未推送" v-if="d.data.pushStatus == '0'" />
							<u-tag style="float:right;border:none;" type="primary" text="已推送" v-else-if="d.data.pushStatus == '1'" />
							<u-tag style="float:right;border:none;" type="success" text="已接收" v-else-if="d.data.pushStatus == '2'" />
							<u-tag style="float:right;border:none;margin-right:30px;font-weight:bold;" type="error" :text="d.data.caseTypeText" v-if="d.data.caseType == '01'" />
							<u-tag style="float:right;border:none;margin-right:30px;font-weight:bold;" type="warning" :text="d.data.caseTypeText" v-else />
						</view>
					</template>
					<template #body>
						<u-row>
							<u-col span="12" style="margin-bottom: 5px;">
								<u-tag text="案发时间:" border-color="#ecf5ff" style="font-weight:bold;float:left;margin-right:10px;" />
								<view class="card-number">
									{{ d.data.caseDate.substring(0,4)+'年'+d.data.caseDate.substring(4,6)+'月'+d.data.caseDate.substring(6,8)+'日' }}
								</view>
							</u-col>
							<u-col span="12" style="margin-bottom: 5px;">
								<u-tag text="当事人:" border-color="#ecf5ff" style="font-weight:bold;float:left;margin-right:10px;" />
								<view class="card-text">
									{{ d.data.partyName }}
								</view>
							</u-col>
							<u-col span="12" style="margin-bottom: 5px;">
								<u-tag text="查获单位:" border-color="#ecf5ff" style="font-weight:bold;float:left;margin-right:10px;" />
								<view class="card-text">
									{{ d.data.compName }}
								</view>
							</u-col>
							<u-col span="12" style="margin-bottom: 5px;">
								<u-tag text="案件性质:" border-color="#ecf5ff" style="font-weight:bold;float:left;margin-right:10px;" />
								<view class="card-text">
									{{ d.data.caseKindName }}
								</view>
							</u-col>
							<u-col span="12" style="margin-bottom: 5px;">
								<u-tag text="本地区流出:" border-color="#ecf5ff" style="font-weight:bold;float:left;margin-right:10px;" />
								<view class="card-text">
									<div style="margin-right:10px;float:left">
										案值<span :style="d.data.caseValue>5?'color:red;padding:5px;':'padding:5px;'">{{ d.data.caseValue }}</span>万元
									</div>
									<div> 卷烟<span :style="d.data.cigaNum>5?'color:red;padding:5px;':'padding:5px;'">{{ d.data.cigaNum }}</span>万支 </div>
								</view>
							</u-col>
						</u-row>
					</template>
				</u-card>
			</template>
		</me-table>
	</view>
</template>
<script>
	import majorService from "@/service/internal/major.service"
	import meTable from '@/components/me-table.vue';
	import fabButton from '@/components/uni-fab.vue';

	import {
		ZDate,
		ZDictSelect,
	} from '@/components';
	export default {

		components: {
			meTable,
			ZDate,
			ZDictSelect,
			fabButton
		},
		data() {
			return {
				client: {},
				licNos: [],
				tels: [],
				headStyle: {
					margin: '10px 15px 5px 15px',
					padding: 0,
				},
				bodyStyle: {
					margin: '5px 15px',
					padding: 0,
				},
				checkStatDict: this.$u.dic.getByDictCode("I_FIELD_CHECK_STATE"), // 检查状态
				checkResultDict: this.$u.dic.getByDictCode("I_FIELD_CHECK_RESULT"), // 检查结果
				showSearch: false,
				more: true,
				formData: {
					caseTypeName: '',
					compCode: this.$storage.get(this.$rp.common.USER).orgLevel == 1 ? this.$storage.get(this.$rp.common.USER).user.org.parentUuid : this.$storage.get(this.$rp.common.USER).cityOrgUuid,
					caseTimes: 'CASE_DATE',
					pushStatusName: '已推送',
					pushStatus: '1',
				},
				listData: [],
				actionSheetList: [],
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
			}
		},
		mounted() {
			// this.setRightBtns();
		},
		methods: {
			// 钉钉上设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				// 先放开右侧标题
				this.$deviceApi.setRight("", () => {}, true, true);
				// 设置右侧多按钮，苹果手机对此接口的格式要求比较严格，不能出现多余的符号
				let menuItemStr = '[{"id":"1","text":"筛选"}]';
				this.$deviceApi.setMenu(JSON.parse(menuItemStr), res => {
					if (res.id == 1) {
						this.handlerShowSearch();
					}
				});
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerShowSearch();
				}
			},
			loadData(page) {
				console.log("page.size", page.size, "page.num", page.num);
				return new Promise(resolve => {
					majorService.caseSudden(page.num, page.size, this.formData).then((res) => {
						if (res.success) {
							resolve({
								"data": res.data,
							});
							this.listData = res.data;
							this.totalCount = res.count;
						} else {
							this.$u.toast(res.msg);
						}
					}).catch((error) => {
						this.$u.toast(error);
					});
				});
			},
			handlerShowSearch() {
				this.showSearch = true;
			},
			handleDictConfirm(item) {
				console.log("调用选中", item);
				this.formData.caseType = item.bcbCode;
				this.formData.caseTypeName = item.bcbName;
			},
			handleDictConfirmStutas(item) {
				this.formData.pushStatus = item.bcbCode;
				this.formData.pushStatusName = item.bcbName;
			},
			handleSearch() {
				this.showSearch = false;
				this.$refs.mescrollItem0.refresh();
			},
			// 将卡片点击事件抛给父组件
			handlerClick(e) {
				// this.$emit('click', e.target);
			},
			// 点击卡片头部
			clickHead() {
				this.$emit("click-head", this.client);
			},
			// 点击卡片信息
			clickBody(id, caseType, pushStatus) {
				this.$u.route('/pages/internal/majorCases/marjorChild?caseUuid=' + id + '&caseType=' + caseType + '&pushStatus=' + pushStatus);
			},
		},
	}
</script>
<style lang="scss" scoped>
	.title {
		font-size: 15px;
		color: #666;
		font-weight: 600;
		margin: 5px 10px;
	}

	.sub-title {
		color: #666;
		margin: 3px 10px;
	}

	.tag-info {
		font-weight: 600;
		color: #666;
		margin-right: 5px;
	}

	.selected {
		border: 1px solid rgb(164, 226, 249) !important;
		box-shadow: #666;
	}

	.card-number {
		font-size: 12px;
		font-weight: 600;
		margin-top: 5px;
		color: #333;
	}

	.card-text {
		font-size: 13px;
		font-weight: 600;
		margin-top: 5px;
		color: #333;
	}

	.news-li {
		font-size: 32rpx;
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;
	}

	.news-li .new-content {
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		color: #666;
	}

	/deep/ .u-input--border[data-v-460c1d26] {
		border-radius: 30px;
		border: 1px solid #dcdfe6;
	}

	.up {
		font-size: 18px;
		font-family: ".PingFang SC";
		font-weight: 600;
		color: #333333;
		opacity: 1;
	}

	.down {
		font-size: 14px;
		font-family: ".PingFang SC";
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.custom-style {
		width: 100px;
		height: 58px;
		background: #0487fb;
		box-shadow: 0px 2px 10px rgba(4, 135, 251, 0.4);
		opacity: 1;
		border-radius: 29px;
		font-size: 19px;
		font-family: ".PingFang SC";
		font-weight: 500;
		color: #ffffff;
		opacity: 1;
	}

	.left-text {
		height: 22px;
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		opacity: 1;
		margin-bottom: 14px;
	}

	.between {
		width: 53px;
		height: 20px;
		background: #E6F1FF;
		border-radius: 19px;
		font-size: 16px;
		font-family: ".PingFang SC";
		font-weight: 600;
		color: #027AFF;
		opacity: 1;
		padding: 7px;
		text-align: center;
		margin-left: 10px;
		margin-right: 10px;
		line-height: 20px;
	}

	.date-width {
		width: 40%;
	}
</style>
